// 模糊搜索
const btn = document.getElementById('btn')
const ipt = document.getElementById('ipt')
const lists = document.getElementById('lists')
ipt.oninput = function() {
    const script = document.createElement('script')
    let url = 'https://www.ymatou.com/products/api/getPreKeywordList?'
    url += '&query=' + ipt.value
    url += '&callback=callback'
    script.src = url
    document.body.appendChild(script)
    script.onload = function() {
        script.remove()
    }
    if(ipt.value) {
        lists.style.background = '#fff'
    }else {
        lists.style.background = ''
    }
}
function callback(data) {
    if(!data.result.Keywords) {
       return lists.innerHTML = ''
    }
    // console.log(data.result.Keywords);
    lists.innerHTML = data.result.Keywords.map(item => `<li>${item}`).join('')
}

// 二级菜单
const menu = document.getElementById('menu')
const sort = document.querySelector('.sort')
const items = document.querySelector('.items')
var res = result = [
    {
        "id": 16,
        "title": "护肤",
        "subTitle": [
            "面膜",
            "水乳",
            "防晒隔离"
        ],
        "pic": "http://pic1.ymatou.com/G02/M0B/0B/61/CgvUBFlE_l-AFtC7AAMyS71u0oU066_1_1_o.gif"
    },
    {
        "id": 17,
        "title": "彩妆",
        "subTitle": [
            "口红",
            "气垫",
            "香水"
        ],
        "pic": "https://pic1.ymatou.com/G02/M0A/ED/A9/CgvUBVeZ2L6ABltOAABxkvbGDQk168_o.png"
    },
    {
        "id": 19,
        "title": "品牌箱包",
        "subTitle": [
            "单肩包",
            "双肩包",
            "LV"
        ],
        "pic": "http://pic1.ymatou.com/G02/M09/0D/78/CgvUBVlFEvOAQkcaAAGYJe4aulA194_143_150_o.gif"
    },
    {
        "id": 18,
        "title": "鞋履",
        "subTitle": [
            "凉鞋",
            "单鞋",
            "Adidas"
        ],
        "pic": "https://pic1.ymatou.com/G02/M00/ED/64/CgvUBFeZ2YSACNR4AACJFnNWXac077_o.png"
    },
    {
        "id": 24,
        "title": "女士穿搭",
        "subTitle": [
            "连衣裙",
            "T恤",
            "衬衫"
        ],
        "pic": "http://pic1.ymatou.com/G02/M08/EC/89/CgvUA1lk5NiANQAeAAD_7CZcg78365_461_486_o.gif"
    },
    {
        "id": 31,
        "title": "男士护肤",
        "subTitle": [
            "发胶",
            "剃须",
            "止汗"
        ],
        "pic": "http://pic1.ymatou.com/G02/M05/6A/09/CgvUBVhSXpOAEDFIAACDzejl1ZE036_1_1_o.png"
    },
    {
        "id": 234,
        "title": "内衣",
        "subTitle": [
            "文胸",
            "CK",
            "维密"
        ],
        "pic": "http://pic1.ymatou.com/G02/M01/EC/A0/CgvUA1lk5rWASAHsAAFaTZMu2iw899_461_486_o.gif"
    },
    {
        "id": 235,
        "title": "品质男装",
        "subTitle": [
            "Polo",
            "衬衫",
            "豆豆鞋"
        ],
        "pic": "http://pic1.ymatou.com/G02/M02/F3/3C/CgvUBVlk4iiAEp0IAACiLbg3h8o349_461_486_o.gif"
    },
    {
        "id": 30,
        "title": "运动",
        "subTitle": [
            "运动鞋",
            "Puma",
            "Nike"
        ],
        "pic": "http://pic1.ymatou.com/G02/M09/F2/32/CgvUBFlk4ziAYl1gAADso_Kix_M090_461_486_o.gif",
    },
    {
        "id": 23,
        "title": "钟表配饰",
        "subTitle": [
            "项链",
            "墨镜",
            "潘多拉"
        ],
        "pic": "https://pic1.ymatou.com/G02/M07/F3/85/CgvUBVeavnWAab-JAACOcFScJj8696_o.png"
    },
    {
        "id": 28,
        "title": "居家",
        "subTitle": [
            "滤水壶",
            "乳胶枕",
            "保温杯"
        ],
        "pic": "http://pic1.ymatou.com/G02/M05/06/B3/CgvUA1lFFDaARUpcAACzNBqBHFw705_188_181_o.gif",
    },
    {
        "id": 27,
        "title": "食品保健",
        "subTitle": [
            "",
            "保健",
            "葡萄酒",
            "减肥排油"
        ],
        "pic": "http://pic1.ymatou.com/G02/M09/18/C5/CgvUA1lHiFiAYmDvAAFME201JUk327_1_1_o.gif",
    },
    {
        "id": 26,
        "title": "母婴",
        "subTitle": [
            "纸尿裤",
            "奶粉",
            "安全座椅"
        ],
        "pic": "http://pic1.ymatou.com/G02/M01/0C/59/CgvUBFlFFSmAFztnAADDj1QetZA463_1_1_o.gif",
    },
    {
        "id": 32,
        "title": "数码家电",
        "subTitle": [
            "洁面仪",
            "电吹风",
            "Beats"
        ],
        "pic": "http://pic1.ymatou.com/G02/M09/69/5F/CgvUBFhSZQSALSJnAABGFQdHEwQ540_1_1_o.png",
    },
]

menu.onmouseover = function() {
    sort.style.display = 'flex'
    sort.innerHTML = result.map(item =>
        `
        <li>
            <a href="#">
                <p>${item.title}><br><span>${item.subTitle}</span></p>
                <img src="${item.pic}" alt="">
            </a>
        </li> 
        `).join("");
}
menu.onmouseout = function() {
    sort.style.display = 'none'
}

// 全球必买更多的点击事件
const even = document.querySelector('#even')
even.addEventListener('mouseover',()=> {
    even.style.color = '#c33'
})
even.addEventListener('mouseout',()=> {
    even.style.color = ''
})
even.addEventListener('click',()=> {
    location.href = './lists.html'
})

//猜你喜欢更多的点击事件
const odd = document.querySelector('#odd')
odd.addEventListener('mouseover',()=> {
    odd.style.color = '#c33'
})
odd.addEventListener('mouseout',()=> {
    odd.style.color = ''
})
odd.addEventListener('click',()=> {
    location.href = './lists.html'
})

//分类事件
menu.addEventListener('mouseover',()=> {
    menu.style.color = '#c33'
})
menu.addEventListener('click',()=> {
    location.href = './lists.html'
})

//回到顶部事件
const Top = document.querySelector('.scrollTop')
Top.addEventListener('click',()=> {
    window.scrollTo({top:0})


})
Top.addEventListener('mouseover',()=> {
    Top.style.color = '#000'
})
Top.addEventListener('mouseout',()=> {
    Top.style.color = ''
})
